<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 自动识别最新稳定版的Vue.js  -->
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body xmlns:v-on="http://www.w3.org/1999/xhtml">
<div id="app">
    <template>
        <div>
            <el-table
                    :data="tableData"
                    :span-method="arraySpanMethod"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="amount1"
                        sortable
                        label="数值 1">
                </el-table-column>
                <el-table-column
                        prop="amount2"
                        sortable
                        label="数值 2">
                </el-table-column>
                <el-table-column
                        prop="amount3"
                        sortable
                        label="数值 3">
                </el-table-column>
            </el-table>

            <el-table
                    :data="tableData"
                    :span-method="objectSpanMethod"
                    border
                    style="width: 100%; margin-top: 20px">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="amount1"
                        label="数值 1（元）">
                </el-table-column>
                <el-table-column
                        prop="amount2"
                        label="数值 2（元）">
                </el-table-column>
                <el-table-column
                        prop="amount3"
                        label="数值 3（元）">
                </el-table-column>
            </el-table>
        </div>
    </template>
</div>
</body>
<script>
    /*必须有vue*/
    new Vue({
        el:'#app',
        data:{
            tableData: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '12987124',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }, {
                id: '12987125',
                name: '王小虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
            }, {
                id: '12987126',
                name: '王小虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
            }]
        },
        methods:{
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex % 2 === 0) {
                    if (columnIndex === 0) {
                        return [1, 2];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
            },

            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }

        }
    })
</script>
</html>
